<template>
	<div class="add-address-page">
		<top-header :title="`${$route.query.address_info ? '修改' : '新增'}收货地址`"></top-header>
		<div class="add-address-form">
			<van-form class="add-address-form__top">
				<van-field
					v-model="username"
					name="name"
					label="联系人"
					placeholder="收货人姓名"
					:rules="[{ required: true, message: '请填写收货人姓名' }]"
				/>
				<van-field
					v-model="number"
					type="number"
					name="tel"
					label="手机号"
					maxlength="11"
					placeholder="请填写手机号"
					:rules="[{ required: true, message: '请填写手机号' }]"
				/>
				<van-field
					readonly
					clickable
					name="area"
					:value="address"
					label="所在地址"
					placeholder="请选择省/市/区/县(区)"
					@click="showArea = true"
				/>
				<van-field
					v-model="detailed_address"
					name="detail_address"
					label="详细地址"
					placeholder="收货人姓名"
					:rules="[{ required: true, message: '请填写收货人姓名' }]"
				/>
				<van-popup v-model="showArea" position="bottom">
					<van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
				</van-popup>
			</van-form>
			<van-form class="add-address-form__bottom">
				<van-field name="switch" label="设为默认地址" class="default-address" input-align="right">
					<template #input>
						<van-switch v-model="switchChecked" size="20" />
					</template>
				</van-field>
			</van-form>
			<div class="add-address-form__button display-center" @click="$route.query.address_info ? goEdit() : goCreate()">
				<van-button type="default">保存</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import { areaList } from '@vant/area-data';

export default {
	name: 'index',
	components: {
		TopHeader,
	},
	data() {
		return {
			username: '', //姓名
			number: '', //手机号
			address: '', //地址
			detailed_address: '', //详细地址
			switchChecked: false, //默认地址
			showArea: false, //地址弹出窗标识
			areaList, //地址
			address_id: '', //地址id
		};
	},
	mounted() {
		if (this.$route.query.address_info) {
			//修改地址时赋值
			const ADDRESS_INFO = this.$route.query.address_info;
			this.username = ADDRESS_INFO.name;
			this.number = ADDRESS_INFO.phone;
			this.address = ADDRESS_INFO.address;
			this.detailed_address = ADDRESS_INFO.detailed;
			this.switchChecked = !!ADDRESS_INFO.is_default;
			this.address_id = ADDRESS_INFO.id;
		}
	},
	methods: {
		goCreate() {
			//提交收货地址
			_api
				.api_userPortal_sysAddress_create({
					name: this.username,
					phone: this.number,
					address: this.address,
					detailed: this.detailed_address,
					is_default: this.switchChecked ? 1 : 0,
				})
				.then((res) => {
					this.$toast.success('保存成功');
					this.$router.push('/address');
				})
				.catch((error) => {
					console.log(error);
					this.$toast.fail('保存失败');
				});
		},
		goEdit() {
			//修改收货地址
			_api
				.api_userPortal_sysAddress_edit({
					sys_address_id: this.address_id,
					name: this.username,
					phone: this.number,
					address: this.address,
					detailed: this.detailed_address,
					is_default: this.switchChecked ? 1 : 0,
				})
				.then((res) => {
					this.$toast.success('修改成功');
					this.$router.push('/address');
				})
				.catch((error) => {
					console.log(error);
					this.$toast.fail('修改失败');
				});
		},
		onConfirm(values) {
			//弹窗
			this.address = values
				.filter((item) => !!item)
				.map((item) => item.name)
				.join('/');
			this.showArea = false;
		},
	},
};
</script>

<style lang="scss" scoped>
.add-address-page {
	background-color: #f9f9f9;
	height: 100vh;

	.add-address-form {
		width: 9.299517rem;
		height: 5.89372rem;
		padding: 0.362319rem;

		.add-address-form__top {
			margin-bottom: 0.338164rem;
		}

		.add-address-form__button {
			width: 100%;
			height: 1.15942rem;

			.van-button--default {
				width: 8.405797rem;
				background: linear-gradient(180deg, #adc9fc, #6899f4);
				border-radius: 24px;
				position: fixed;
				bottom: 0.821256rem;

				.van-button__icon,
				.van-button__text {
					color: white;
				}
			}
		}

		.van-form {
			.van-cell {
				height: 1.449275rem;
				padding: 0 0.410628rem 0 0.748792rem;
				display: flex;
				align-items: center;
			}
		}

		.van-cell:nth-of-type(4)::after {
			border-bottom: 0;
		}
	}
}
</style>
